<template>
  <div>
    <main class="main">
      <div class="subject">
        <div class="navLeft">
          <div class="centerBox">
            <div class="centerTop">
              <div class="topText">智能开关</div>
            </div>
            <div class="centerList">
              <div class="listContent">
                <div class="line"></div>
                <div class="rightDetails">
                  <div class="contentImg">
                    <img src=""
                         alt="">
                  </div>
                  <div class="contentText">
                    <i class="contentTitle">四路开关总数(个)</i>
                    <i class="contentNumber">51</i>
                  </div>
                  <div class="contentText">
                    <i class="online">在线(个)</i>
                    <i class="onlineNum">51</i>
                  </div>
                  <div class="contentText">
                    <i class="offLine">离线(个)</i>
                    <i class="offLineNum">0</i>
                  </div>
                </div>
              </div>
              <div class="listContent">
                <div class="line"></div>
                <div class="rightDetails">
                  <div class="contentImg">
                    <img src=""
                         alt="">
                  </div>
                  <div class="contentText">
                    <i class="contentTitle">八路开关总数(个)</i>
                    <i class="contentNumber">16</i>
                  </div>
                  <div class="contentText">
                    <i class="online">在线(个)</i>
                    <i class="onlineNum">16</i>
                  </div>
                  <div class="contentText">
                    <i class="offLine">离线(个)</i>
                    <i class="offLineNum">0</i>
                  </div>
                </div>
              </div>
              <div class="listContent">
                <div class="line"></div>
                <div class="rightDetails">
                  <div class="contentImg">
                    <img src=""
                         alt="">
                  </div>
                  <div class="contentText">
                    <i class="contentTitle">十二路开关总数(个)</i>
                    <i class="contentNumber">1</i>
                  </div>
                  <div class="contentText">
                    <i class="online">在线(个)</i>
                    <i class="onlineNum">1</i>
                  </div>
                  <div class="contentText">
                    <i class="offLine">离线(个)</i>
                    <i class="offLineNum">0</i>
                  </div>
                </div>
              </div>
              <div class="listContent">
                <div class="line"></div>
                <div class="rightDetails">
                  <div class="contentImg">
                    <img src=""
                         alt="">
                  </div>
                  <div class="contentText">
                    <i class="contentTitle">逻辑控制器总数(个)</i>
                    <i class="contentNumber">8</i>
                  </div>
                  <div class="contentText">
                    <i class="online">在线(个)</i>
                    <i class="onlineNum">8</i>
                  </div>
                  <div class="contentText">
                    <i class="offLine">离线(个)</i>
                    <i class="offLineNum">0</i>
                  </div>
                </div>
              </div>
              <div class="chart">
                <div class="pieBgk">
                  <div class="pie">
                    <div class="charts"
                         ref="chart"></div>
                  </div>

                </div>
                <div class="chartMessage">
                  <div class="onLineBox">
                    <img src=""
                         alt=""
                         class="onLineIcon">
                    <i class="onLineText">在线</i>
                  </div>
                  <div class="offLineBox">
                    <img src=""
                         alt=""
                         class="offLineIcon">
                    <i class="offLineText">离线</i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="centerFooter">
            <div class="centerTop">
              <div class="topText">远程开/关灯</div>
            </div>
            <div class="select">
              <div class="selectText">
                选择范围
              </div>
            </div>
            <p class="selectedRange">
              已选范围:
            </p>
            <div class="codingList">
              <div class="codingBox">
                TSG-2ATG-Z1
              </div>
              <div class="codingBox">
                TSG-2ATG-Z1
              </div>
            </div>
            <div class="codingList">
              <div class="codingBox">
                TSG-2ATG-Z1
              </div>
              <div class="codingBox">
                TSG-2ATG-Z1
              </div>
            </div>
            <div class="codingList">
              <div class="codingBox">
                TSG-2ATG-Z1
              </div>
              <div class="codingBox">
                TSG-2ATG-Z1
              </div>
            </div>
            <div class="codingList">
              <div class="codingBox">
                TSG-2ATG-Z1
              </div>
              <div class="codingBox">
                TSG-2ATG-Z1
              </div>
            </div>
            <div class="codingList">
              <div class="codingBox">
                TSG-2ATG-Z1
              </div>
              <div class="codingBox">
                TSG-2ATG-Z1
              </div>
            </div>
            <div class="bottomSwitch">
              <div class="open">
                <div>
                  远程开启
                </div>
              </div>
              <div class="close">
                <div>
                  远程关闭
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="navRight">
          <div class="loopType">
            <div class="centerTop">
              <div class="topText">回路状态</div>
            </div>
          </div>
          <div class="loopOpen">
            <div class="centerTop">
              <div class="topText">回路开启状态</div>
            </div>
            <!-- 折线图 -->
            <div class="lineChart"
                 ref="lineChart"></div>
          </div>
          <div class="controlMethod">
            <div class="centerTop general">
              <div class="topText">灯控策略</div>
              <div class="controlMethodInfo">
                <i class="infoText">详情</i>
                <img src=""
                     alt="">
              </div>
            </div>
            <div class="controlMethodList">
              <div class="addControl">
                <!-- <img src="../../assets/img/lightUp/校园物联-智能照明-灯控策略-新增图标.png" alt="" class="settingIcon"> -->
                <div class="settingIcon"></div>
                <div class="addText">新增灯控策略</div>
              </div>
              <div class="onceControlInfo">
                <div class="onceControlInfoText">
                  <i>艺术楼灯控</i>
                  <i>2023-01-16/2023-01-16</i>
                </div>
                <div>照明</div>
              </div>
              <div class="onceControlInfo">
                <div class="onceControlInfoText">
                  <i>艺术楼灯控</i>
                  <i>2023-01-16/2023-01-16</i>
                </div>
                <div>照明</div>
              </div>
              <div class="onceControlInfo">
                <div class="onceControlInfoText">
                  <i>艺术楼灯控</i>
                  <i>2023-01-16/2023-01-16</i>
                </div>
                <div>照明</div>
              </div>
              <div class="onceControlInfo">
                <div class="onceControlInfoText">
                  <i>艺术楼灯控</i>
                  <i>2023-01-16/2023-01-16</i>
                </div>
                <div>照明</div>
              </div>
              <div class="onceControlInfo">
                <div class="onceControlInfoText">
                  <i>艺术楼灯控</i>
                  <i>2023-01-16/2023-01-16</i>
                </div>
                <div>照明</div>
              </div>
              <div class="onceControlInfo">
                <div class="onceControlInfoText">
                  <i>艺术楼灯控</i>
                  <i>2023-01-16/2023-01-16</i>
                </div>
                <div>照明</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts" name="lightUp">
import { getCurrentInstance } from '@vue/runtime-core'
import * as echarts from 'echarts'
import 'echarts-gl'
import { onMounted, ref } from 'vue'
import { getParametricEquation, getPie3D } from './chart' //工具类js，页面路径自己修改
/* 饼图 */
const color = ['#3cd6b7', '#fe9326', '#124fb7', '#383893']
const currentInstance = ref()
const optionData = ref<Array<any>>([
  {
    name: '在线',
    value: 220,
  },
  {
    name: '不在线',
    value: 428,
  },
])
const statusChart = ref<any>(null)
const option = ref<any>({})
// 初始化label样式
const setLabel = (): void => {
  optionData.value.forEach((item, index) => {
    item.itemStyle = {
      color: color[index],
    }
    item.label = {
      normal: {
        show: true,
        color: color[index],
        position: 'right',
        // distance:-10,
        offset: [0, 3],
        formatter: [
          '{d|{d}%}',
          '————',
          //   '{c|{c}}{b|台}',
          '{b|{b}}',
        ].join('\n'), // 用\n来换行
        rich: {
          b: {
            // color: '#fff',
            lineHeight: 25,
            align: 'left',
            color: color[index],
          },
          c: {
            fontSize: 22,
            // color: '#fff',
            textShadowColor: '#1c90a6',
            textShadowOffsetX: 0,
            textShadowOffsetY: 2,
            textShadowBlur: 5,
            color: color[index],
          },
          d: {
            color: color[index],
            align: 'left',
          },
        },
      },
    }
    item.labelLine = {
      normal: {
        length2: 30,
        lineStyle: {
          width: 1,
          color: color[index],
        },
      },
    }
  })
}
setLabel()
// 饼图初始化
const chart = ref<any>(null)
const initChart = (): void => {
  statusChart.value = echarts.init(chart.value)
  // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
  console.log(optionData.value, 9999999)

  option.value = getPie3D(optionData.value, 0, 250, 30, 44, 1)
  statusChart.value.setOption(option.value)
  // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
  option.value.series.push({
    name: '信用评价', //自己根据场景修改
    backgroundColor: 'transparent',
    type: 'pie',
    label: {
      opacity: 1,
      fontSize: 13,
      lineHeight: 20,
      //{hr|}为圆点显示内容
      // formatter: "{a|{b}：{c}}\n{hr|}",
      //折线图文字颜色
      color: '#fffdef',
      rich: {
        //圆点位置大小配置
        b: {
          //auto自定义
          backgroundColor: 'auto',
          borderRadius: 20,
          width: 20,
          height: 20,
          padding: [0, 0, 0, 0],
          marginBottom: 10,
        },
        a: {
          padding: [-12, 10, -20, 15],
        },
      },
    },
    // //折线图长度
    // labelLine: {
    //   //第一段
    //   length: 15,
    //   //第二段
    //   length2: 25,
    // },
    startAngle: -160, // 起始角度，支持范围[0, 360]。
    clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
    radius: ['20%', '60%'],
    center: ['50%', '50%'],
    data: optionData.value,
    itemStyle: {
      opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
    },
  })
  console.log(option.value, 8888888)

  statusChart.value.setOption(option.value)
  bindListen(statusChart.value)
}
// 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
// optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
const bindListen = (myChart: any, optionName = 'option'): void => {
  let selectedIndex = ''
  let hoveredIndex = ''
  // 监听 mouseover，近似实现高亮（放大）效果
  myChart.on('mouseover', (params: any) => {
    // 准备重新渲染扇形所需的参数
    let isSelected
    let isHovered
    let startRatio
    let endRatio
    let k
    // 如果触发 mouseover 的扇形当前已高亮，则不做操作
    if (hoveredIndex === params.seriesIndex) {
      // 否则进行高亮及必要的取消高亮操作
    } else {
      // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
      if (hoveredIndex !== '') {
        // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
        isSelected =
          currentInstance.value[optionName].series[hoveredIndex].pieStatus
            .selected
        isHovered = false
        startRatio =
          currentInstance.value[optionName].series[hoveredIndex].pieData
            .startRatio
        endRatio =
          currentInstance.value[optionName].series[hoveredIndex].pieData
            .endRatio
        k = currentInstance.value[optionName].series[hoveredIndex].pieStatus.k
        // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
        currentInstance.value[optionName].series[
          hoveredIndex
        ].parametricEquation = getParametricEquation(
          startRatio,
          endRatio,
          isSelected,
          isHovered,
          k,
          currentInstance.value[optionName].series[hoveredIndex].pieData.value
        )
        currentInstance.value[optionName].series[
          hoveredIndex
        ].pieStatus.hovered = isHovered
        // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
        hoveredIndex = ''
      }
      // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
      if (
        params.seriesName !== 'mouseoutSeries' &&
        params.seriesName !== '信用评价'
      ) {
        // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
        isSelected =
          currentInstance.value[optionName].series[params.seriesIndex].pieStatus
            .selected
        isHovered = true
        startRatio =
          currentInstance.value[optionName].series[params.seriesIndex].pieData
            .startRatio
        endRatio =
          currentInstance.value[optionName].series[params.seriesIndex].pieData
            .endRatio
        k =
          currentInstance.value[optionName].series[params.seriesIndex].pieStatus
            .k
        // 对当前点击的扇形，执行高亮操作（对 option 更新）
        currentInstance.value[optionName].series[
          params.seriesIndex
        ].parametricEquation = getParametricEquation(
          startRatio,
          endRatio,
          isSelected,
          isHovered,
          k,
          currentInstance.value[optionName].series[params.seriesIndex].pieData
            .value + 60
        )
        currentInstance.value[optionName].series[
          params.seriesIndex
        ].pieStatus.hovered = isHovered
        // 记录上次高亮的扇形对应的系列号 seriesIndex
        hoveredIndex = params.seriesIndex
      }
      // 使用更新后的 option，渲染图表
      myChart.setOption(currentInstance.value[optionName])
    }
  })
  myChart.on('globalout', () => {
    // 准备重新渲染扇形所需的参数
    let isSelected
    let isHovered
    let startRatio
    let endRatio
    let k
    if (hoveredIndex !== '') {
      // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
      isSelected =
        currentInstance.value[optionName].series[hoveredIndex].pieStatus
          .selected
      isHovered = false
      k = currentInstance.value[optionName].series[hoveredIndex].pieStatus.k
      startRatio =
        currentInstance.value[optionName].series[hoveredIndex].pieData
          .startRatio
      endRatio =
        currentInstance.value[optionName].series[hoveredIndex].pieData.endRatio
      // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
      currentInstance.value[optionName].series[
        hoveredIndex
      ].parametricEquation = getParametricEquation(
        startRatio,
        endRatio,
        isSelected,
        isHovered,
        k,
        currentInstance.value[optionName].series[hoveredIndex].pieData.value
      )
      currentInstance.value[optionName].series[hoveredIndex].pieStatus.hovered =
        isHovered
      // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
      hoveredIndex = ''
    }
    // 使用更新后的 option，渲染图表
    myChart.setOption(currentInstance.value[optionName])
  })
}
// 自适应宽高
const changeSize = (): void => {
  statusChart.value.resize()
}

/* 平滑折线图 */
const lineChart = ref<any>(null)
const initLineChart = () => {
  const myLineChart = echarts.init(lineChart.value, 'dark')
  lineChartOption && myLineChart.setOption(lineChartOption)
}
const lineChartOption = {
  color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
  title: {
    text: '单位：小时',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985',
      },
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['2月', '4月', '6月', '10月', '12月'],
    },
  ],
  yAxis: [
    {
      type: 'value',
    },
  ],
  series: [
    {
      name: 'Line 1',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0,
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#FFBE21',
          },
          {
            offset: 1,
            color: '#000000',
          },
        ]),
      },
      emphasis: {
        focus: 'series',
      },
      data: [10, 23, 41, 62, 100],
    },
  ],
}

onMounted(() => {
  currentInstance.value = getCurrentInstance()
  initLineChart()
  initChart()
  window.onresize = () => {
    changeSize()
  }
})
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100vh;
  background-color: #0e293d;
}
.subject {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
/* 左侧 */
.navLeft {
  width: 300px;
  height: 884px;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.centerBox {
  width: 300px;
  height: 460px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.52) 100%
  );
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
}
.centerTop {
  width: 300px;
  height: 26px;
  background: linear-gradient(
    90deg,
    rgba(90, 255, 255, 0.06) 0%,
    rgba(90, 255, 255, 0.67) 52%,
    rgba(90, 255, 255, 0.19) 100%
  );
  opacity: 1;
  overflow: hidden;
}
.topText {
  height: 16px;
  font-size: 16px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: 700;
  color: #ffffff;
  line-height: 16px;
  letter-spacing: 2px;
  margin: 7px 0 3px 38px;
}

.centerList {
  width: 274px;
}
.listContent {
  margin-top: 10px;
  display: flex;
}
.line {
  width: 4px;
  height: 52px;
  background: linear-gradient(270deg, #74dcff 0%, rgba(116, 220, 255, 0) 100%);
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  margin: 0 2px 0 10px;
}
.rightDetails {
  width: 274px;
  height: 52px;
  background: linear-gradient(270deg, #74dcff 0%, rgba(116, 220, 255, 0) 100%);
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  display: flex;
  justify-content: space-between;
}
.contentImg {
  margin: 7px 0 7px 10px;
}
.contentText {
  display: flex;
  flex-direction: column;
}
.contentTitle {
  height: 12px;
  font-size: 12px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  line-height: 12px;
  margin-top: 5px;
}
.contentNumber {
  width: 19px;
  height: 22px;
  font-size: 22px;
  font-family: D-DIN-Bold, D-DIN;
  font-weight: 700;
  color: #ffffff;
  line-height: 22px;
  margin-top: 8px;
}
.online {
  width: 44px;
  height: 12px;
  font-size: 12px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  line-height: 12px;
  margin-top: 5px;
}
.onlineNum {
  width: 19px;
  height: 22px;
  font-size: 22px;
  font-family: D-DIN-Bold, D-DIN;
  font-weight: 700;
  color: rgba(90, 255, 255, 0.8314);
  line-height: 22px;
  margin-top: 8px;
}
.offLine {
  width: 44px;
  height: 12px;
  font-size: 12px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  line-height: 12px;
  margin-top: 5px;
}
.offLineNum {
  width: 12px;
  height: 22px;
  font-size: 22px;
  font-family: D-DIN-Bold, D-DIN;
  font-weight: 700;
  color: rgba(242, 255, 0, 0.8314);
  line-height: 22px;
  margin-top: 8px;
}
.centerFooter {
  width: 300px;
  height: 404px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.52) 100%
  );
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
}
.select {
  width: 110px;
  height: 30px;
  background: rgba(90, 255, 255, 0.2);
  border-radius: 3px 3px 3px 3px;
  opacity: 1;
  border: 1px solid #5affff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 8px 0 0 10px;
}
.selectText {
  width: 56px;
  height: 14px;
  font-size: 14px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  line-height: 14px;
}
.selectedRange {
  width: 51px;
  height: 12px;
  font-size: 12px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #bff9f9;
  line-height: 12px;
  margin: 8px 0 0 10px;
}
.codingList {
  margin-top: 8px;
  width: 300px;
  height: 36px;
  display: flex;
  justify-content: space-evenly;
}
.codingBox {
  width: 135px;
  height: 36px;
  background: rgba(116, 220, 255, 0.1);
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bottomSwitch {
  width: 300px;
  height: 34px;
  display: flex;
  margin-top: 20px;
}
.open {
  width: 100px;
  height: 34px;
  background: linear-gradient(360deg, #5affff 0%, rgba(0, 0, 0, 0) 100%);
  border-radius: 3px 3px 3px 3px;
  opacity: 1;
  border: 2px solid;
  border-image: linear-gradient(
      180deg,
      rgba(90.00000223517418, 255, 255, 0),
      rgba(90.00000223517418, 255, 255, 1)
    )
    2 2;
  margin-left: 36px;
  div {
    width: 100px;
    height: 32px;
    background: linear-gradient(
      90deg,
      #5affff 0%,
      rgba(90, 255, 255, 0) 52%,
      #5affff 100%
    );
    border-radius: 3px 3px 3px 3px;
    opacity: 1;
    border: 1px solid;
    border-image: linear-gradient(
        90deg,
        rgba(90.00000223517418, 255, 255, 1),
        rgba(255, 255, 255, 1),
        rgba(90.00000223517418, 255, 255, 1)
      )
      1 1;
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    line-height: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #b8fffd 100%);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.close {
  width: 100px;
  height: 34px;
  background: linear-gradient(360deg, #5affff 0%, rgba(0, 0, 0, 0) 100%);
  border-radius: 3px 3px 3px 3px;
  opacity: 1;
  border: 2px solid;
  border-image: linear-gradient(
      180deg,
      rgba(65.99035978317261, 73.96967321634293, 75.9644977748394, 0),
      rgba(66.00000366568565, 73.00000324845314, 75.00000312924385, 1)
    )
    2 2;
  margin: 0 36px 0 28px;
  div {
    width: 100px;
    height: 32px;
    background: rgba(116, 137, 144, 0.3);
    border-radius: 3px 3px 3px 3px;
    opacity: 1;
    border: 1px solid rgba(140, 150, 153, 0.5);
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    line-height: 14px;

    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.chart {
  width: 300px;
}
.pieBgk {
  width: 151px;
  height: 87px;
  opacity: 1;
  // border: 2px solid;
  // border-image: linear-gradient(180deg, rgba(90.00000223517418, 255, 255, 0), rgba(90.00000223517418, 255, 255, 1)) 2 2;
  position: absolute;
  left: 75px;
  top: 329px;
}
.pie {
  background-image: url(./柱状图背景1.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position-y: 5px;
  width: 130px;
  height: 76px;
  // background: linear-gradient(180deg, rgba(255,190,33,0) 0%, rgba(255,190,33,0.24) 100%);
  opacity: 1;
  position: relative;
}
.charts {
  width: 100%;
  height: 100%;
}
.chartMessage {
  width: 132px;
  height: 20px;
  position: absolute;
  left: 85px;
  top: 430px;
  display: flex;
  justify-content: space-between;
}
.onLineBox,
.offLineBox {
  display: flex;
  align-items: center;
}
.onLineText,
.offLineText {
  width: 24px;
  height: 12px;
  font-size: 12px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  line-height: 12px;
  margin-left: 6px;
}

// 右侧
.navRight {
  width: 300px;
  height: 884px;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.loopType {
  width: 300px;
  height: 180px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.52) 100%
  );
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
}
.loopOpen {
  width: 300px;
  height: 196px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.52) 100%
  );
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
}
// 灯控策略模块
.controlMethod {
  width: 300px;
  height: 476px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.52) 100%
  );
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
}
.general {
  display: flex;
  justify-content: space-between;
}
.controlMethodInfo {
  display: flex;
  img {
    margin: 9px 20px 4px 0;
  }
}
.infoText {
  width: 24px;
  height: 12px;
  font-size: 12px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  line-height: 12px;
  margin: 9px 4px 0 0;
}
.controlMethodList {
  width: 300px;
  box-sizing: border-box;
  padding: 10px;
}
.addControl {
  width: 280px;
  height: 34px;
  background: rgba(90, 255, 255, 0.2);
  border-radius: 3px 3px 3px 3px;
  opacity: 1;
  border: 1px solid #5affff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.settingIcon {
  width: 20px;
  height: 20px;
}
.addText {
  width: 84px;
  height: 14px;
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  line-height: 14px;
  margin-left: 8px;
  color: #ffffff;
}
.onceControlInfo {
  width: 280px;
  height: 54px;
  background: linear-gradient(
    90deg,
    #5affff 0%,
    rgba(90, 255, 255, 0) 50%,
    #5affff 100%
  );
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 1px solid;
  border-image: linear-gradient(
      90deg,
      rgba(90.00000223517418, 255, 255, 1),
      rgba(255, 255, 255, 1),
      rgba(90.00000223517418, 255, 255, 1)
    )
    1 1;
  margin-top: 10px;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}
.onceControlInfo div:last-child {
  width: 28px;
  height: 12px;
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #5affff;
  line-height: 12px;
}
.onceControlInfoText {
  height: 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.onceControlInfoText i:first-child {
  width: 70px;
  height: 12px;
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  line-height: 12px;
}
.onceControlInfoText i:last-child {
  width: 139px;
  height: 12px;
  font-size: 12px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  line-height: 12px;
}

.lineChart {
  height: 148px;
  width: 289px;
}
</style>



